* {
  margin: 0;
  padding: 0;
}

html,body{
  width: 100%;
  height: 100%;
}

body{
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

main{
  width: 91%;
  height: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-around;
  flex-wrap: wrap;
  align-items: flex-start;
}

main div{
  width: 33.333%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
}

main img{
  width: 30%;
  cursor: pointer;
  z-index: 99;
}

.people-info{
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0,0,0,0.1);
  border-radius: 0 0 0 3vh;
  width: 26vw;
  height: 7vh;
  z-index: 10;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-overflow: clip;
  overflow: hidden;
}

.more-info{
  white-space: nowrap;
  font-size: 3vh;
  color: #002d71;
  animation-name: scroll-text;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.info-item b,.info-item i{
  color: chocolate;
}

.info-item b:nth-child(2){
  text-decoration: underline;
}

.info-item b:last-child{
  vertical-align: middle;
  display: inline-block;
  width: 20vh;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


@keyframes scroll-text{
  0%{
    transform: translateX(110%);
  }
  100%{
    transform: translateX(-160%);
  }
}

.start-dialog,.get-dialog{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-align: center;
  background-color:rgba(0,0,0,0.3);
  z-index: 9999;
  display: none;
}

.info-dialog{
  margin: 10% auto;
  width: 33%;
  height: 40%;
  border-radius: 1vw;
  background-color: white;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}

.info-dialog span:nth-of-type(1){
  transform: rotate(-5deg);
  width: 95%;
  text-align: left;
  font-size: 3vw;
  /*font-style: italic;*/
  font-weight: bolder;
  color: #b55e0b;
  cursor: default;
}

.info-dialog span:nth-of-type(2){
  transform: rotate(8deg);
  width: 90%;
  text-align: right;
  font-size: 1.5vw;
  font-weight: bold;
  color: #b55e0b;
  margin: 5% auto;
  cursor: default;
}

.start-dialog .info-dialog span:hover{
  color: #62513e;
}

.info-dialog button{
  width: 28%;
  height: 15%;
  margin-left: 45%;
  text-align: center;
  font-size: 1.6vw;
  line-height: 15%;
  /*  font-weight: bolder;*/
  color: white;
  background: #62aeff;
  border: none;
  border-radius: 1vw;
  outline: none;
  cursor: pointer;
}

.get-dialog .info-dialog{
  justify-content: center;
}

.get-dialog .info-dialog span{
  width: 95%;
  text-align: center;
  font-size: 2vw;
  margin-bottom: 5%;
  color: black;
  font-weight: normal;
  background-color: rgba(0,0,0,0.1);
  border-radius: 15%;
}

.get-dialog .info-dialog .get-prizename,.start-dialog .info-dialog .get-prizenum{
  font-weight: 900;
  color: red;
  cursor: crosshair;
}

.get-dialog .info-dialog .get-prizename:hover,.start-dialog .info-dialog .get-prizenum:hover{
  color: black;
}

.info-dialog button:hover{
  box-shadow: 0 0 0 0.2em #92c7ff;
}

.start-dialog .info-dialog button:active{
  transform: scale(0.95);
}

.get-dialog .info-dialog button{
  margin-left: 0;
  transform: rotate(-5deg);
}

.get-dialog .info-dialog button:active{
  transform: rotate(-5deg) scale(0.95);
}

.welcome{
  background-image: url(../img/welcome.jpg); 
}

.progress-dialog{
  position: fixed;
  z-index: 999;
  height: 100%;
  width:100%;
  top: 0;
  left: 0;
  background-color:rgba(0,0,0,0.1);
  font-size: 1.5vw;
  text-align:center;
  display: none;
}

.progress-dialog strong{
  display: block;
  margin: 18% auto;
  margin-bottom: 1%;
  color: chocolate;
  width:30%;
}

.progress-body{
  margin: 0 auto;
  width:30%;
  border-radius: 15vw;
  background-color: #bdd0e4;
}

.progress-wrap{
  width: 0%;
  background-color: #489ef9;
  color: white;
  border-radius: 15vw;
  line-height: 5vh;
}

.help-text{
  width: 3vw;
  height: 3vw;
  position: fixed;
  z-index: 99999;
  left: -1.5vw;
  top: 0;
  transition-duration: 0.6s;
  cursor: pointer;
}

.help-text:hover{
  transform: rotate(360deg);
  left: 0;
  width: 5vw;
  height: 5vw;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸
::-webkit-scrollbar
{
  width: 1vh;
  height: 1vh;
  background-color: rgba(0,0,0,0);
}

定义滚动条轨道
 内阴影+圆角
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 3vh;
  background-color: rgba(0,0,0,0.1);
}

定义滑块
 内阴影+圆角
::-webkit-scrollbar-thumb
{
  border-radius: 3vh;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #888;
}*/